<template>
  <div style="margin-left: 30px">
    <h3>滚动条插件</h3>
    <!-- 外层盒子 -->
    <div style="height: 200px; width: 600px; background-color: #ccc">
      <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
      <happy-scroll color="rgba(0,0,0,0.5)" size="7" hide-horizontal resize :min-length-v="0.9">
        <!-- 内层盒子--内容区 -->
        <div class="con">
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
          <p>上古造字，玉王同字，王字三横一竖。三横乃“天”“地”“人”。一竖乃参通天地人者，是谓王。</p>
        </div>
      </happy-scroll>
    </div>
    <div style="width: 100%; margin-top: 50px">
      <vue-seamless-scroll :data="List" class="seamless-warp" :class-option="classOption">
        <ul>
          <li class="DataList_top" v-for="(item, index) in List" :key="index">
            {{ item }}
            <!-- <div class="DataList_left">{{ index + 1 }}</div>
            <div class="DataList_left">{{ item.itemname }}</div>
            <div class="DataList_left">{{ item.number }}</div>-->
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>

    <div class="height:200px">
      <seam />
    </div>
    <div class="testScoll">
      <div style="height:900px;background:#f00"></div>
    </div>

    <div class="page-example3">
      <vue-j-scroll
        class="j-scroll"
        :data="listData"
        :steep="0.3"
        scrollDirection="left"
        :isRoller="false"
        style="width:100%"
        :rollerScrollDistance="50"
        v-if="this.listData.length >3"
      >
        <div :images="listData" class="ul-scoll flexStart" style="width:100%" v-viewer>
          <div
            v-for="(item, index) in listData"
            :key="index"
            class="images"
            style="width:420px;margin-right:27px;height: 277px;"
          >
            <img :src="item" :key="index" width="100%" height="100%" style="object-fit: cover;" />
          </div>
        </div>
      </vue-j-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import seam from "./asome";
export default {
  data() {
    return {
      List: [1, 2, 3, 4, 5],
      listData:[
        'https://img2.baidu.com/it/u=2724396724,1177839465&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=375',
        'https://img1.baidu.com/it/u=2560066094,1161429997&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
        'https://img1.baidu.com/it/u=2624162028,664996319&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=333',
        'https://img1.baidu.com/it/u=867063979,2762982490&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=450'
      ]
    };
  },
  components: {
    //组件
    vueSeamlessScroll,
    seam
  },
  computed: {
    classOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        //  openRoll:false,
        // fheight:300,
      };
      setInterval(this.tim, 2000);
    }
  },
  methods: {
    tim() {
      this.List = this.List.map(item => {
        return item + 10;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.con {
  height: 280px;
  // height: 2800px;
}
.seamless-warp {
  width: 200px;
  height: 100px;
  //
  // margin: 0;
  overflow: hidden;
  background: lightcoral;
}
ul {
  margin: 0;
  line-height: 20px;
}
.div1 {
  height: 280px;
}
.div2 {
  max-height: 50px;
  overflow-y: auto;
  text-align: center;
}
.scroll-up {
  height: 100px;
  line-height: 100px;
  overflow: hidden;
}
.animate-up {
  transition: all 0.5s ease-in-out;
  transform: translateY(-40px);
}
li {
  cursor: pointer;
}
li:hover {
  color: #fff;
  background: olivedrab;
  transition: 0.5s all;
}

.testScoll {
  height: 500px;
  overflow: auto;
}
.testScoll::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 100px;
}
.testScoll::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  background-color: #f90;
  height: 5px;
  width: 5px;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.testScoll::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  /*border-radius: 10px;*/
  background: #ededed;
}
.page-example3 {
  width: 100%;
  height: 277px;
  overflow: hidden;

  .ul-scoll {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
</style>